<template>
  <el-dialog
    :title="title"
    :visible.sync="detailsvisible"
    :before-close="handleClose"
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      size="mini"
      label-position="right"
    >
      <el-form-item label="计划名称" prop="planName">
        <el-input
          class="input-item"
          v-model="ruleForm.planName"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="计划日期" prop="beginDate">
        <el-date-picker
          v-model="times"
          type="daterange"
          align="right"
          unlink-panels
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          @change="selecttime"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="关联任务" prop="taskIds">
        <el-select
          v-model="ruleForm.taskIds"
          multiple
          collapse-tags
          placeholder="请选择"
        >
          <el-option
            v-for="(item, index) in projectTaskDtoList"
            :key="index"
            :label="item.taskName"
            :value="item.taskId"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="login-btn flex-center">
      <el-button class="Register" @click="handleClose()">取消</el-button>
      <el-button
        type="danger"
        @click="deleteli()"
        v-if="$route.query.verifyStatus == -1 && title == '编辑计划'"
        >删除</el-button
      >
      <el-button type="primary" @click="submitForm()">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { Administration } from '@/api/projectAdministration.js';
export default {
  name: 'setPlan',
  data () {
    return {
      detailsvisible: false,
      title: '创建计划',
      times: '',
      changeStatus: '',
      projectTaskDtoList: [],
      ruleForm: {
        planName: '',
        beginDate: '',
        endDate: '',
        taskIds: []
      },
      rules: {
        planName: [{ required: true, message: '请输入', trigger: 'blur' }],
        beginDate: [{ required: true, message: '请选择', trigger: 'change' }],
        taskIds: [{ required: true, message: '请选择', trigger: 'change' }]
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    };
  },
  mounted () {
  },
  methods: {
    info (data) {
      this.detailsvisible = true
      this.projectTaskDtoList = data
      this.title = '创建计划'
    },
    frominfo (list, data) {
      this.detailsvisible = true
      this.projectTaskDtoList = list
      this.ruleForm = data
      this.times = []
      this.times.push(data.beginDate)
      this.times.push(data.endDate)
      this.title = '编辑计划'
      // this.loadPlanWidgetData()
    },
    /**
     * 项目计划列表
     */
    loadPlanWidgetData () {
      let params = {
        changeId: this.ruleForm.id
      };
      return new Promise((resolve, reject) => {
        Administration.planchange(this, params).then(res => {
          this.changeStatus = res.data.changeStatus
        }).catch(e => {
          reject(e);
        });
      });
    },
    // 计划日期
    selecttime (times) {
      if (times) {
        this.ruleForm.beginDate = times[0]
        this.ruleForm.endDate = times[1]
      } else {
        this.ruleForm.beginDate = ''
        this.ruleForm.endDate = ''
      }
    },
    deleteli () {
      this.$emit('changePlans', this.ruleForm)
      this.handleClose()
    },
    // 保存
    submitForm () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          if (this.title === '编辑计划') {
            this.$emit('upPlans', this.ruleForm)
          } else {
            this.$emit('getPlans', this.ruleForm)
          }
          this.handleClose()
        }
      })
    },
    // 关闭弹框
    handleClose () {
      this.ruleForm = {
        planName: '',
        beginDate: '',
        endDate: '',
        taskIds: []
      }
      this.times = ''
      this.detailsvisible = false
    }
  }
}
</script>
<style scoped>
.login-btn {
  margin-top: 20px;
}
/deep/.el-dialog {
  width: 30% !important;
  margin-top: 30vh !important;
}
</style>
